<template>
  <section>
    <div class="box">
      <div class="square" style="--i: 0"></div>
      <div class="square" style="--i: 1"></div>
      <div class="square" style="--i: 2"></div>
      <div class="square" style="--i: 3"></div>
      <div class="square" style="--i: 4"></div>
      <div class="square" style="--i: 5"></div>
      <div class="container">
        <div class="form">
          <h2>LOGIN to Elglish</h2>
          <form @submit.prevent="login">
            <div class="inputBx">
              <span>用户名</span>
              <input
                id="username"
                type="text"
                v-model="ruleForm.username"
                autocomplete="off"
                required="required"
              />
            </div>
            <div class="inputBx password">
              <span>密码</span>
              <input
                id="password-input"
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
                required="required"
              />
            </div>
            <div class="inputBx">
              <input type="submit" value="login">
            </div>
          </form>
          <p>
            Forgot password?<a @click="forgot('forgotpassword')">Click Here</a>
          </p>
          <p>
            Don't have an account <a @click="register('register')">Sign Up</a>
          </p>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import { userLogin } from "@/api/login.js";
export default {
  name: "LoginComponent", // 修改组件名称
  data() {
    // 验证规则还未写
    return {
      ruleForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
          // 处理登录成功的逻辑
          // 拿到用户名密码信息，然后发送请求到后端进行验证
          console.log(this.ruleForm);
          // 发送请求到后端进行验证,
          userLogin(this.ruleForm).then((res) => {
            console.log(res);
            if (res.code == 200) {
              //登录更改的提示
              this.$message({
                message: "登录成功",
                type: "success",
                duration: 2000,
              });
              // 如果验证成功，后端会返回一个token，前端需要将token保存到本地,这里我们使用localStorage来保存token
              localStorage.setItem("token", res.data.token);
              //将用户名保存到本地
              localStorage.setItem("username", res.data.studentName);
              // 然后跳转到首页
              this.$router.push({ name: "index" });
            } else if (res.code == 500) {
              this.$message.error("用户名或密码错误,请重新输入");
            } else {
              this.$message.error("其他问题");
            }
          });
    },
    forgot() {
      this.$router.push({ name: "forgotpassword" });
      // instance.post("http://luckycola.com.cn/tools/customMail", this.abc);
    },
    register() {
      this.$router.push({ name: "register" });
    },
  },
};
</script>
<style lang="less">
@import url(../../assets/css/login.css);
</style>
